<template>
  <div>
    <el-card>
      <CategorySelector></CategorySelector>
    </el-card>
    <el-card class="card">
      <div v-if="handoff">
        <el-button type="primary" icon="el-icon-plus" @click="editOrAdd">添加属性</el-button>
        <el-table :data="attrsList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="180">
          </el-table-column>
          <el-table-column prop="address" label="属性值列表">
            <template slot-scope="scope">
              <el-tag v-for="item in scope.row.attrValueList" :key="item.id" closable @close="handleClose">
                {{ item.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editOrAdd(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        属性名：
        <el-input style="width: 200px;margin-left: 20px" placeholder="请输入属性名" size="mini"></el-input>
        <div style="margin-top: 16px;">
          <el-button type="primary" size="small">添加属性值</el-button>
          <el-button size="small" @click="Cancel">取消</el-button>
        </div>
        <el-table :data="attrValueList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="valueName" label="属性值名称">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 16px;">
          <el-button type="primary" size="small">保存</el-button>
          <el-button size="small" @click="Cancel">取消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CategorySelector from '@/components/CategorySelector/index.vue'
export default {
  name: 'Attr',
  data() {
    return {
      attrValueList:[],
      handoff:true
    }

  },
  components: {
    CategorySelector,
  },
  computed: {
    ...mapState({
      attrsList: (state) => {
        return state.attrs.attrsList
      }
    })
  },
  methods: {
    handleClose() { //删除tag的回调

    },
    editOrAdd(row){
      this.handoff = false
      if(row){
        this.attrValueList = row.attrValueList
      }else{
        this.attrValueList = []
      }
    },
    Cancel(){
      this.handoff = true
    }
  }
}
</script> 

<style lang="scss" scoped>
.card {
  margin-top: 20px;
}
</style>
